<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: huxin
 * @Date: 2023-06-28 15:56:04
 * @LastEditTime: 2023-10-11 21:16:05
-->
<script lang="ts" setup >
import { onMounted } from 'vue'


// let str: string = 'abc'
// console.log('str', str)
// let arr1: number[] = [1, 2, 3]
// let arr2: string[] = ['1', '2', '3']
// let arr3: (number | string)[] = [1, '2']
// let obj1 = { a: '1', b: 2 }
// // console.log('obj1', obj1.b);
// interface Obj2 {
//   a: string
//   b: number
//   c: boolean
// }
// function getObj2(obj2: Obj2) {
//   return obj2
// }
// let d = {...obj1,...{c:false}}

// let c = getObj2(d)
// console.log('c', c)

// console.log('arr', arr1, arr2, arr3, obj1)

onMounted(() => {

})

const boxMouseenter = () => {
  // let transition = document.querySelector('.transition')
  let transition: any = document.getElementById('transition')
  // console.log(123, transition);
  transition.className = 'transition-hover'
  transition.addEventListener('transitionend', () => {
    console.log(6);
    // transition.style.display = 'none'
    transition.style.border = 'none'
    transition.style.background = '#fff'
  })
}
</script>

<template>
  <div>
    <h1>This is an home page</h1>
    <main>
      <div class="box">
        <div id="transition" class="transition" @mouseenter.once="boxMouseenter">
          <div class="icon">
            <Star style="width: 30px; height: 30px;" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<style scoped>
.box {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid #000;
  cursor: pointer;
  position: relative;
  display: none;
}
.transition {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  /* background-color: brown; */
  /* background-color: blue; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}
.transition-hover {
  width: 35px;
  height: 35px;
  border-radius: 100px;
  background-color: #0000ff29;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  transition: all 1s ease-in;
  border: 1px solid #000;
  
  
}
.icon{
  display: block;
  width: 30px;
  height: 30px;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>